<template>
  <div class="transfer_out_page">
    <div class="transfer_info"></div>
    <van-cell title="定期存款账号" :value="form.account" />
    <van-cell is-link title="转存账号" :value="form.toAccount" @click="show = true" />
    <van-cell title="定期存款金额" readonly :value="form.money" />

    <div class="next">
      <van-button round type="info" @click="next" block>下一步</van-button>
    </div>
    <div class="tips_box">
      <div class="tips">温馨提示</div>
      <div class="tips_detail">
        <p>手机银行开立的定期存款不能在营业网点办理支取，但可以到营业网点补打实物存单，
          补打实物存单后，改定期存款即转为柜面开立的定期存款，在手机银行只能进行查询，不能支取。</p>
      </div>
    </div>

    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>
<script>
import {
  ActionSheet
} from 'vant';

export default {
  components: {
    [ActionSheet.name]: ActionSheet
  },
  data() {
    return {
      form: {
        account: '101220001039496261',
        toAccount: '101220001039496262',
        money: '97531.24'
      },
      show: false,
      actions: [{ name: '101260001039492062' }, { name: '101260001039492063' }],
    };
  },
  methods: {
    selectItem() {},
    onSelect(item) {
      this.form.toAccount = item.name;
      this.show = false;
    },
    next() {
      console.log('next');
    },
  }
};
</script>
<style lang="less">
  .transfer_out_page{
    height: 100vh;
    background-color: #EFEFEF;
    .transfer_info{}
    .next{
      padding: 1.5rem;
    }
    .van-cell__title{
      max-width: 40%;
      font-weight: bold;
    }
    .van-cell__value{
      text-align: left;
    }
    .tips_box{
      padding: 2rem 1rem 1rem;
      .tips{
        font-size: 18PX;
        color: orange;
      }
      .tips_detail{
        color: #555;
        font-size: 12PX;
        line-height: 22PX;
        p{
          margin: 0.3rem 0.5rem;
        }
      }
    }
  }
</style>
